{% extends "personal_center/user-base.html" %}
{% block page_link %}
    <script src="../../static/stand_inside_letter/js/stant_index.js"></script>
{% endblock %}


{% block page_search %}

{% endblock %}


{% block page_body %}
    <div class="container-fluid relative" style="height: 95%;">
        <div class="row" style="height: 100%;">
            <div class="col-lg-3">
                <div class="iq-card">
                    <div class="iq-card-body">
                        <div class="">
                            <div class="iq-email-list">
                                <button class="btn btn-primary btn-lg btn-block mb-3 font-size-16 p-3"
                                        data-target="#compose-email-popup" data-toggle="modal"><i
                                        class="ri-send-plane-line mr-2"></i>新消息
                                </button>
                                <div class="iq-email-ui nav flex-column nav-pills">
                                    <li class="nav-link active" role="tab" data-toggle="pill" href="#mail-inbox"><a
                                            href="index.html"><i class="ri-mail-line"></i>收信箱<span
                                            class="badge badge-primary ml-2">0</span></a></li>
                                    <li class="nav-link" role="tab" data-toggle="pill" href="#mail-sent"><a
                                            href="#"><i class="ri-mail-send-line"></i>已发送</a></li>
                                    <li class="nav-link" role="tab" data-toggle="pill" href="#mail-trash"><a
                                            href="#"><i class="ri-delete-bin-line"></i>已删除</a></li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 mail-box-detail" style="height: 95%;">
                <div class="iq-card" style="height: 100%;">
                    <div class="iq-card-body p-0" style="height: 100%;">
                        <div class="" style="height: 100%;">
                            <div class="iq-email-to-list p-3">
                                <div class="d-flex justify-content-between">
                                    <ul>
                                        <li>
                                            <a href="#" id="navbarDropdown" data-toggle="dropdown">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input"
                                                           id="customCheck1">
                                                    <label class="custom-control-label" for="customCheck1"></label>
                                                </div>
                                            </a>
                                        </li>
                                        <li data-toggle="tooltip" data-placement="top" title="刷新"><a href="#"><i
                                                class="ri-restart-line"></i></a></li>
                                        <li data-toggle="tooltip" data-placement="top" title="已删除"><a href="#"><i
                                                class="ri-delete-bin-line"></i></a></li>
                                        {#                                            <li data-toggle="tooltip" data-placement="top" title="收信箱"><a href="#"><i#}
                                        {#                                                    class="ri-mail-unread-line"></i></a></li>#}
                                    </ul>
                                    <div class="iq-email-search d-flex">
                                        <form class="mr-3 position-relative">
                                            <div class="form-group mb-0">
                                                <input type="email" class="form-control" id="exampleInputEmail1"
                                                       aria-describedby="emailHelp" placeholder="查询">
                                                <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                                            </div>
                                        </form>
                                        <ul>
                                            <li class="mr-3">
                                                <a class="font-size-14" href="#" id="navbarDropdown2"
                                                   data-toggle="dropdown">
                                                    1 - 10 of 1
                                                </a>
                                            </li>
                                            <li data-toggle="tooltip" data-placement="top" title="上一页"><a
                                                    href="#"><i class="ri-arrow-left-s-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="下一页"><a href="#"><i
                                                    class="ri-arrow-right-s-line"></i></a></li>
                                            <li class="mr-0" data-toggle="tooltip" data-placement="top"
                                                title="设置"><a href="#"><i
                                                    class="ri-list-settings-line"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="iq-email-listbox" style="height: 80%;">
                                {#        收件箱           #}
                                <div class="tab-content" style="height: 100%;">
                                    <div class="tab-pane fade show active" id="mail-inbox" role="tabpanel"
                                         style="height: 100%;">
                                        <ul class="iq-email-sender-list" style="height: 100%;">
                                            <li class="iq-unread">
                                                <div class="d-flex align-self-center">
                                                    <div class="iq-email-sender-info">
                                                        <div class="iq-checkbox-mail">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="mailk">
                                                                <label class="custom-control-label"
                                                                       for="mailk"></label>
                                                            </div>
                                                        </div>
                                                        <a href="javascript: void(0);" class="iq-email-title">xx医生</a>
                                                    </div>
                                                    <div class="iq-email-content">
                                                        <a href="javascript: void(0);" class="iq-email-subject">你好！你好！你好！你好！你好！你好！你好！你好！</span>
                                                        </a>
                                                        <div class="iq-email-date">2021-08-05</div>
                                                    </div>
                                                    <ul class="iq-social-media">
                                                        <li><a href="#"><i class="ri-delete-bin-2-line"></i></a></li>
                                                    </ul>
                                                </div>
                                            </li>

                                            <div class="email-app-details" style="height: 100%;">
                                                <div class="iq-card" style="height: 100%;">
                                                    <div class="iq-card-body p-0" style="height: 100%;">
                                                        <div class="" style="height: 100%;">
                                                            <div class="iq-email-to-list p-3">
                                                                <div class="d-flex justify-content-between">
                                                                    <ul>
                                                                        <li data-toggle="tooltip"
                                                                            data-placement="top" title="删除"><a
                                                                                href="#"><i
                                                                                class="ri-delete-bin-line"></i></a>
                                                                        </li>
                                                                    </ul>
                                                                    <div class="iq-email-search d-flex">
                                                                        <ul>
                                                                            <li class="mr-3">
                                                                                <a class="font-size-14" href="#">1
                                                                                    of 1</a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top"
                                                                                title="上一条"><a href="#"><i
                                                                                    class="ri-arrow-left-s-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="下一条"><a
                                                                                    href="#"><i
                                                                                    class="ri-arrow-right-s-line"></i></a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr class="mt-0">
                                                            <div class="iq-inbox-subject p-3"
                                                                 style="height: 80%;overflow: auto;">
                                                                <h5 class="mt-0" id="msg-title"></h5>
                                                                <div class="iq-inbox-subject-info">
                                                                    <div class="iq-inbox-body mt-5">
                                                                        <div>
                                                                            <p id="say-hello">你好！ X医生</p>
                                                                        </div>
                                                                        <div id="content">

                                                                        </div>

                                                                        <div id="inscribe">
                                                                            <p class="mt-5 mb-0">
                                                                                <span class="float-right align-self-center" id="inscribe-date"></span>
                                                                                <span id="inscribe-office">胸外科</span>
                                                                                <span class="d-inline-block w-100" id="inscribe-name"></span>
                                                                            </p>
                                                                        </div>

                                                                    </div>
                                                                    <hr>
                                                                    <div class="attegement">
                                                                        <h6 class="mb-2">附件:</h6>
                                                                        <ul id="accessory">
{#                                                                            <li class="icon icon-attegment">#}
{#                                                                                <i class="fa fa-file-text-o"#}
{#                                                                                   aria-hidden="true"></i> <span#}
{#                                                                                    class="ml-1">我的文档.doc</span>#}
{#                                                                            </li>#}
{#                                                                            <li class="icon icon-attegment">#}
{#                                                                                <i class="fa fa-file-text-o"#}
{#                                                                                   aria-hidden="true"></i> <span#}
{#                                                                                    class="ml-1">我的文档.pdf</span>#}
{#                                                                            </li>#}
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </ul>

                                    </div>

                                    {#                                        已发送#}
                                    <div class="tab-pane fade" id="mail-sent" role="tabpanel">
                                        <ul class="iq-email-sender-list">
                                            <li>
                                                <div class="d-flex align-self-center">
                                                    <div class="iq-email-sender-info">
                                                        <div class="iq-checkbox-mail">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="mailk11">
                                                                <label class="custom-control-label"
                                                                       for="mailk11"></label>
                                                            </div>
                                                        </div>
                                                        <a href="javascript: void(0);" class="iq-email-title" id=""></a>
                                                    </div>
                                                    <div class="iq-email-content">
                                                        <a href="javascript: void(0);" class="iq-email-subject">你好！你好！你好！你好！你好！你好！你好！你好！</span>
                                                        </a>
                                                        <div class="iq-email-date">2021-08-05</div>
                                                    </div>
                                                    <ul class="iq-social-media">
                                                        <li><a href="#"><i class="ri-delete-bin-2-line"></i></a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <div class="email-app-details">
                                                <div class="iq-card">
                                                    <div class="iq-card-body p-0">
                                                        <div class="">
                                                            <div class="iq-email-to-list p-3">
                                                                <div class="d-flex justify-content-between">
                                                                    <ul>
                                                                        <li data-toggle="tooltip"
                                                                            data-placement="top" title="删除"><a
                                                                                href="#"><i
                                                                                class="ri-delete-bin-line"></i></a>
                                                                        </li>
                                                                    </ul>
                                                                    <div class="iq-email-search d-flex">
                                                                        <ul>
                                                                            <li class="mr-3">
                                                                                <a class="font-size-14" href="#">1
                                                                                    of 1</a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top"
                                                                                title="上一条"><a href="#"><i
                                                                                    class="ri-arrow-left-s-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="下一条"><a
                                                                                    href="#"><i
                                                                                    class="ri-arrow-right-s-line"></i></a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr class="mt-0">
                                                            <div class="iq-inbox-subject p-3">
                                                                <h5 class="mt-0">这是一条已发送信息标题</h5>
                                                                <div class="iq-inbox-subject-info">
                                                                    <div class="iq-inbox-body mt-5">
                                                                        <p>你好！ X医生</p>
                                                                        <p>
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！</p>
                                                                        <p>
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！</p>
                                                                        <p class="mt-5 mb-0">
                                                                            <span class="float-right align-self-center">2021-08-05 08:00:00</span>
                                                                            胸外科<span
                                                                                class="d-inline-block w-100">XXX</span>
                                                                        </p>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="attegement">
                                                                        <h6 class="mb-2">附件:</h6>
                                                                        <ul>
                                                                            <li class="icon icon-attegment">
                                                                                <i class="fa fa-file-text-o"
                                                                                   aria-hidden="true"></i> <span
                                                                                    class="ml-1">我的文档.doc</span>
                                                                            </li>
                                                                            <li class="icon icon-attegment">
                                                                                <i class="fa fa-file-text-o"
                                                                                   aria-hidden="true"></i> <span
                                                                                    class="ml-1">我的文档.pdf</span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </ul>
                                    </div>


                                    <div class="tab-pane fade" id="mail-trash" role="tabpanel">
                                        <ul class="iq-email-sender-list">
                                            <li>
                                                <div class="d-flex align-self-center">
                                                    <div class="iq-email-sender-info">
                                                        <div class="iq-checkbox-mail">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                       id="mailk14">
                                                                <label class="custom-control-label"
                                                                       for="mailk14"></label>
                                                            </div>
                                                        </div>
                                                        <a href="javascript: void(0);" class="iq-email-title">xx医生</a>
                                                    </div>
                                                    <div class="iq-email-content">
                                                        <a href="javascript: void(0);" class="iq-email-subject">你好！你好！你好！你好！你好！你好！你好！你好！</span>
                                                        </a>
                                                        <div class="iq-email-date">2021-08-05</div>
                                                    </div>
                                                    <ul class="iq-social-media">
                                                        <li><a href="#"><i class="ri-delete-bin-2-line"></i></a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <div class="email-app-details">
                                                <div class="iq-card">
                                                    <div class="iq-card-body p-0">
                                                        <div class="">
                                                            <div class="iq-email-to-list p-3">
                                                                <div class="d-flex justify-content-between">
                                                                    <ul>
                                                                        <li data-toggle="tooltip"
                                                                            data-placement="top" title="删除"><a
                                                                                href="#"><i
                                                                                class="ri-delete-bin-line"></i></a>
                                                                        </li>
                                                                    </ul>
                                                                    <div class="iq-email-search d-flex">
                                                                        <ul>
                                                                            <li class="mr-3">
                                                                                <a class="font-size-14" href="#">1
                                                                                    of 1</a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top"
                                                                                title="上一条"><a href="#"><i
                                                                                    class="ri-arrow-left-s-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="下一条"><a
                                                                                    href="#"><i
                                                                                    class="ri-arrow-right-s-line"></i></a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr class="mt-0">
                                                            <div class="iq-inbox-subject p-3">
                                                                <h5 class="mt-0">这是一条已删除信息标题</h5>
                                                                <div class="iq-inbox-subject-info">
                                                                    <div class="iq-inbox-body mt-5">
                                                                        <p>你好！ X医生</p>
                                                                        <p>
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！</p>
                                                                        <p>
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！
                                                                            这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！这是一条站内信息，这是一条测试信息！</p>
                                                                        <p class="mt-5 mb-0">
                                                                            <span class="float-right align-self-center">2021-08-05 08:00:00</span>
                                                                            胸外科<span
                                                                                class="d-inline-block w-100">XXX</span>
                                                                        </p>
                                                                    </div>
                                                                    <hr>
                                                                    <div class="attegement">
                                                                        <h6 class="mb-2">附件:</h6>
                                                                        <ul>
                                                                            <li class="icon icon-attegment">
                                                                                <i class="fa fa-file-text-o"
                                                                                   aria-hidden="true"></i> <span
                                                                                    class="ml-1">我的文档.doc</span>
                                                                            </li>
                                                                            <li class="icon icon-attegment">
                                                                                <i class="fa fa-file-text-o"
                                                                                   aria-hidden="true"></i> <span
                                                                                    class="ml-1">我的文档.pdf</span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </ul>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="compose-email-popup" class="compose-popup modal modal-sticky-bottom-right modal-sticky-lg">
                <div class="iq-card iq-border-radius-20 mb-0">
                    <div class="iq-card-body">
                        <div class="row align-items-center">
                            <div class="col-md-12 mb-3">
                                <h5 class="text-primary float-left"><i class="ri-pencil-fill"></i> 撰写信息
                                </h5>
                                <button type="submit" class="float-right close-popup" data-dismiss="modal"><i
                                        class="ri-close-fill"></i></button>
                            </div>
                        </div>
                        <form class="email-form">
                            <div class="form-group row">
                                <label for="inputEmail3" class="col-sm-2 col-form-label">收信人:</label>
                                <div class="col-sm-10">
                                    <select id="inputEmail3" class="select2jsMultiSelect form-control"
                                            multiple="multiple">
                                        <option value="王xx">王xx</option>
                                        <option value="赵xx">赵xx</option>
                                        <option value="钱xx">钱xx</option>
                                        <option value="孙xx">孙xx</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="cc" class="col-sm-2 col-form-label">抄送:</label>
                                <div class="col-sm-10">
                                    <select id="cc" class="select2jsMultiSelect form-control" multiple="multiple">
                                        <option value="王xx">王xx</option>
                                        <option value="赵xx">赵xx</option>
                                        <option value="钱xx">钱xx</option>
                                        <option value="孙xx">孙xx</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="subject" class="col-sm-2 col-form-label">主题:</label>
                                <div class="col-sm-10">
                                    <input type="text" id="subject" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="subject" class="col-sm-2 col-form-label">正文:</label>
                                <div class="col-md-10">
                                    <textarea class="textarea form-control" rows="5">请编写信息正文</textarea>
                                </div>
                            </div>
                            <div class="form-group row align-items-center compose-bottom pt-3 m-0">
                                <div class="d-flex flex-grow-1 align-items-center">
                                    <div class="send-btn">
                                        <button type="submit" class="btn btn-primary">发送</button>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="send-panel float-right">
                                        <label class="ml-2 mb-0 iq-bg-primary rounded"><a href="javascript:void();">
                                            <i class="ri-delete-bin-line text-primary"></i></a> </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}



{% block script %}

{% endblock %}



